<template>
  <div class="statics-gather">
    <div class="statics-title">
      <div class="select-box">
        <div class="select_li mini">
          <el-select v-model="yearData" placeholder="请选择" size="small" @change="selectFun('year')" value-key="year">
            <el-option v-for="item in yearOptions" :key="item.year" :label="item.year + '年'" :value="item"></el-option>
          </el-select>
        </div>
        <div class="select_li mini">
          <el-select v-model="monthData" placeholder="请选择" size="small" @change="selectFun">
            <el-option
              v-for="item in monthOptions"
              :key="item.month"
              :label="item.month ? item.month + '月' : '全部'"
              :value="item.month"></el-option>
          </el-select>
        </div>
        <div class="select_li mini">
          <div>类型：</div>
          <el-select
            v-model="holidayData"
            placeholder="请选择"
            size="small"
            @change="selectFun('holiday')"
            value-key="typeName">
            <el-option
              v-for="item in holidayOptions"
              :key="item.typeId"
              :label="item.typeName"
              :value="item"></el-option>
          </el-select>
        </div>
        <div class="select_li mini">
          <el-select v-model="leaveData" placeholder="请选择" size="small" @change="selectFun">
            <el-option
              v-for="item in leaveOptions"
              :key="item.leaveId"
              :label="item.leaveName"
              :value="item.leaveId"></el-option>
          </el-select>
        </div>
        <div class="select_li mini">
          <div>销假：</div>
          <el-select v-model="backType" placeholder="请选择" size="small" @change="selectFun('back')">
            <el-option
              v-for="item in backTypeOptions"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"></el-option>
          </el-select>
        </div>
      </div>
      <div class="select-box">
        <el-button type="primary" size="small" @click="cutPage">考勤一览表</el-button>
        <div class="statics-work-tips">
          <span>考勤时间：{{ workTime.attendanceStandard }}</span>
        </div>
      </div>
    </div>
    <div class="statics-gather-main">
      <gather-table ref="right2" showType="3" :showAll="showAll"></gather-table>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import GatherTable from './staticsAttendance/GatherTable'
import { getSearchTimeList, getTypeList } from '@apis/api-attendance.js'
moment.locale('zh-cn')
export default {
  components: {
    GatherTable,
  },
  props: {
    typeFrom: String,
    orgId: String,
    showAll: {
      type: String,
      default: '',
    },
    showType: {
      type: String,
      default: '3',
    },
    workTime: {
      type: Object,
      default: () => {
        return { attendanceRole: '', attendanceStandard: '' }
      },
    },
  },
  data() {
    return {
      moment: moment,
      param2: {
        userId: localStorage.pskh_userId,
        orgId: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgId,
        type: '1',
      },
      yearOptions: [],
      yearData: {},
      monthOptions: [],
      monthData: '',
      holidayOptions: [
        {
          typeName: '全部',
          typeId: '',
        },
      ],
      holidayData: {},
      leaveOptions: [
        {
          typeName: '全部',
          typeId: '',
        },
      ],
      leaveData: '',
      backTypeOptions: [
        {
          typeName: '全部',
          typeId: '',
        },
        {
          typeName: '已销假',
          typeId: '1',
        },
        {
          typeName: '未销假',
          typeId: '0',
        },
      ],
      backType: '',
    }
  },
  created() {
    this.getTypeList()
    this.getSearchTimeList()
  },
  mounted() {},
  methods: {
    initData() {
      if (!this.yearData.year || !this.holidayData.typeId) return
      const month1 = this.monthData ? this.monthData : '01'
      const timeS = this.yearData.year + '-' + month1
      const month2 = this.monthData ? this.monthData : '12'
      const timeE = this.yearData.year + '-' + month2
      const startTime = moment(timeS).startOf('month').format('YYYY-MM-DD')
      const endTime = moment(timeE).endOf('month').format('YYYY-MM-DD')
      this.$refs.right2.getPersonLeaveStatistics(
        startTime,
        endTime,
        this.holidayData.typeId,
        this.leaveData,
        this.param2.orgId,
        this.param2.userId,
        this.backType
      )
    },
    getSearchTimeList() {
      getSearchTimeList().then(res => {
        if (res.status === 200) {
          this.yearOptions = res.data
          const arr = res.data.filter(item => {
            return item.isChoose
          })
          this.yearData = arr[0]
          this.monthOptions = [{ month: '' }, ...res.data[0].monthList]
          this.initData()
        }
      })
    },
    getTypeList() {
      getTypeList().then(res => {
        if (res.status === 200 && res.data.length) {
          this.holidayOptions = res.data
          this.holidayData = res.data[0]
          this.leaveOptions = res.data[0].children
          this.initData()
        }
      })
    },
    selectFun(type) {
      if (type === 'holiday') {
        this.leaveOptions = this.holidayData.children
        this.leaveData = ''
      }
      if (type === 'year') {
        this.monthOptions = [{ month: '' }, ...this.yearData.monthList]

        this.monthData = this.yearData.monthList[0].month
      }
      this.initData()
    },
    cutPage() {
      this.$emit('cutPage', '0')
    },
  },
}
</script>

<style lang="scss" scoped>
.statics-gather {
  height: 100%;
  font-size: 14px;
  width: 100%;

  .statics-title {
    height: 56px;
    // box-shadow: inset 0px -2px 9px 0px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 0 20px;
    font-size: 16px;
    .select-box {
      display: flex;
      align-items: center;
      .select_li {
        display: flex;
        align-items: center;
        margin-right: 20px;
        &.mini {
          .el-select {
            width: 100px;
          }
        }
      }
      .el-button {
        margin-right: 20px;
      }
      .statics-work-tips {
        color: #999999;
      }
    }
  }

  .statics-work-tips {
    color: #999999;
  }

  .statics-gather-main {
    height: calc(100% - 56px);
    background-color: #fff;
  }
}
</style>
